<template>
  <div>
    <el-dialog title="添加Sku" :visible.sync="subDialogVisible" width="64%">
        <el-card>
          <el-row :gutter="12">
                <el-col :span="2">
                    <el-button type="primary" @click="newSku()"
                        >新增Sku</el-button
                    >
                </el-col>
            </el-row>
          <el-table :data="skuList" border stripe>
            <el-table-column label="ID" prop="id">
            </el-table-column>
            <el-table-column label="名称" width="190">
              <template slot-scope="scope">
                <el-input style="width:170px;"
                  v-model="scope.row.name"
                  placeholder="请输入名称"
                  @change="setSkuName(scope.row.id, scope.row.name)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="售价">
              <template slot-scope="scope">
                <el-input style="width:90px;"
                  v-model="scope.row.sellPrice"
                  placeholder="售价"
                  @change="setSellPrice(scope.row.id, scope.row.sellPrice)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="成本价">
              <template slot-scope="scope">
                <el-input style="width:90px;"
                  v-model="scope.row.costPrice"
                  placeholder="成本价"
                  @change="setCostPrice(scope.row.id, scope.row.costPrice)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="库存">
              <template slot-scope="scope">
                <el-input style="width:90px;"
                  v-model="scope.row.initStock"
                  placeholder="库存"
                  @change="setInitStock(scope.row.id, scope.row.initStock)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="已售数量" prop="sold"></el-table-column>
            <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-value="Y" inactive-value='N' @change="skuStateChange(scope.row)"></el-switch>
                    </template>
            </el-table-column>
          </el-table>
        </el-card>
    </el-dialog>
  </div>
</template>

<script>
import Api from "@/api/Api.js";
import MallApi from "@/api/Mall";
export default {
  props: {},
  data() {
    return {
      subDialogVisible: false,
      productId: '',
      skuList: []
    };
  },
  watch: {},
  methods: {
    showSkuList(productId) {
      this.subDialogVisible = true;
      this.productId = productId;
      MallApi.getSkuList({'productId':this.productId}).then((res) => {
        if (res.success) {
          this.skuList = res.data.skuList;
        } else {
          return this.$message.error("获取图片列表失败");
        }
      });
    },
    newSku() {
      MallApi.saveSku({
        productId: this.productId
      }).then((res) => {
        if (res.success) {
          this.showSkuList(this.productId);
        }
      });
    },
    setSkuName(id, name) {
      MallApi.setSkuName({
        id: id,
        name: name,
      }).then((res) => {
        if (res.success) {
          this.showSkuList(this.productId);
        }
      });
    },
    setCostPrice(id, costPrice) {
      MallApi.setSkuCostPrice({
        id: id,
        costPrice: costPrice,
      }).then((res) => {
        if (res.success) {
          this.showSkuList(this.productId);
        }
      });
    },
    setSellPrice(id, sellPrice) {
      MallApi.setSkuSellPrice({
        id: id,
        sellPrice: sellPrice,
      }).then((res) => {
        if (res.success) {
          this.showSkuList(this.productId);
        }
      });
    },
    setInitStock(id, initStock) {
      MallApi.setSkuInitStock({
        id: id,
        initStock: initStock,
      }).then((res) => {
        if (res.success) {
          this.showSkuList(this.productId);
        }
      });
    },
    skuStateChange(row) {
      MallApi.setSkuStatus({
        id: row.id,
        status: row.status,
      }).then((res) => {
        if (res.success) {
          this.showSkuList(this.productId);
        }else {
          row.status='N';
          return this.$message.error(res.msg);
        }
      });
    }
  }
};
</script>

<style>
.form_ipt {
  width: 450px;
}
</style>
